<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{$route.meta.title}}</p></div>
  <div class="ivu-card-body">
    <Form ref="formRef" :model="formModel" :rules="formRules" :label-width="100">

      <FormItem prop="fields" label="充值类型：">
        <Select v-model="formModel.fields" placeholder="请充值类型">
          <Option v-for="(v, k) in apiConfig['user_wallet_fields']" :value="k.toString()" :key="k">{{ v }}</Option>
        </Select>
      </FormItem>

      <FormItem prop="user_code" label="会员账号："><Input v-model="formModel.user_code" placeholder="会员账号"  @on-change="onChangeFindRealNameByUserCode"/></FormItem>

      <FormItem prop="real_name" label="会员姓名："><Input v-model="formModel.real_name" placeholder="会员姓名" disabled/></FormItem>

      <FormItem prop="amount" label="充值数量："><Input v-model="formModel.amount" placeholder="增加就填写正整数，减少则负数，如：'-100'"/></FormItem>

      <FormItem><Button type="primary" :loading="buttonLoading" @click="clickSubmit">确认提交</Button></FormItem>
    </Form>
  </div>
</div>
</template>

<script>
import apiConfig from '@/api/config';
import utils from '@/utils/index';
import user from '@/api/user/index';
import userWallet from '@/api/user/wallet';

export default {
  data () {
    return {
      buttonLoading: false,
      formRules: {
        fields: [
          {type:'string', required: true, message: '请充值类型!', trigger: 'blur'}
        ],
        user_code: [
          {required: true, message: '请输入会员账号!', trigger: 'blur'},
          {type:'string', min: 5, message: '请输入不少于5位的账号!', trigger: 'blur'}
        ],
        amount: [
          {required: true, message: '请输入充值数量!', trigger: 'blur'}
        ]
      },
      formModel: {
        fields: '1',
        real_name: ''
      },
      apiConfig: {}
    };
  },
  methods: {
    onChangeFindRealNameByUserCode() {
      if(utils.stringLength(this.formModel.user_code, 5)) {
        return false;
      }

      var _this = this;
      user.findFirstByUserCode(this.formModel.user_code).then(function(res) {
        if(res) {
          _this.formModel.real_name = res.model.real_name;
        }
      });
    },
    clickSubmit(){
      var _this = this;
      this.buttonLoading = true;
      this.$refs.formRef.validate((valid)=>{
        if(valid){
          userWallet.updateAmountByUserCode(_this.formModel.user_code, _this.formModel).then(function(res) {
            if(res) {
              _this.$Message.success({
                content: res.message,
                onClose: function() {
                  _this.$refs.formRef.resetFields();
                }
              });
            }
            _this.buttonLoading = false;
          });
        } else {
          _this.buttonLoading = false;
        }
      });
    }
  },
  mounted() {
    var _this = this;
    apiConfig.find().then(function(value) {
      _this.apiConfig = value;
    });
  }
}
</script>

<style>
</style>